<template>
  <el-dialog title="编辑" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1000px">
    <div class="dialog-title">基本信息</div>
    <el-table :data="tableDataList"
              ref="advergroupTable"
              :max-height="tableHeight"
              class="tableHightClass"
    >
      <el-table-column :label="item.label" align="center" v-for="(item,index) in tableColumns" :prop="item.key" v-if="item.visible?item.visible:true" :fixed="item.fixed?item.fixed:false" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
                       width="80">
        <template slot-scope="scope">
          <div class="group-btn">
            <el-tooltip content="编辑" placement="top" effect="light">
              <img src="@/assets/images/tableEdit.png" alt="" @click="handleUpdate(scope.row)">
            </el-tooltip>
            <el-tooltip content="暂停" placement="top" effect="light" v-if="scope.row.status==1">
              <img src="@/assets/images/stop.png" alt="" @click="handleChanges(scope.row)">
            </el-tooltip>
            <el-tooltip content="启用" placement="top" effect="light" v-else>
              <img src="@/assets/images/open.png" alt="" @click="handleChanges(scope.row)">
            </el-tooltip>
          </div>

        </template>
      </el-table-column>
    </el-table>
    <editAdMentChanges v-if="showAdMentChanges" :visableIf.sync="showAdMentChanges" :plate_id="plate_id" :position_id="position_id" :childList="childList"></editAdMentChanges>
  </el-dialog>
</template>

<script>
  import { reqPlanInfoById, reqPositionTaskList, reqPositionStausClose, reqPositionStausOpen } from '@/api/advergroupPlanMgt/index'

  export default {
    name: 'editAdMent',
    components: {
      editAdMentChanges: () => import('./editAdMentChanges.vue')
    },
    data() {
      return {
        active: 0,//选中
        showAdMentChanges: false,
        plate_id: null,// 平台id
        position_id: null,//版位id
        showReject: false,//驳回弹窗
        tableDataList: [],//表格数据
        tableHeight: 200,
        tableColumns: [
          { key: 'directional', label: `投放版位`, visible: true, fixed: true },
          { key: 'position', label: `用户定向`, visible: true, fixed: true },
          { key: 'startTime', label: `开始日期`, visible: true, fixed: true },
          { key: 'endTime', label: `结束日期`, visible: true, fixed: true },
          { key: 'totleCoin', label: `预算`, visible: true, fixed: true },
          { key: 'pay_type_name', label: `出价方式`, visible: true, fixed: true },
          { key: 'custom_coin', label: `投放日预算`, visible: true, fixed: true },
          { key: 'msg', label: `备注`, visible: true }
        ],
        form: {
          id: null,//计划id
          task: null//活动json
        },
        childList: []//活动集合

      }
    },
    created() {
     this.getPlanInfo();
    },
    methods: {
      getPlanInfo(){
        reqPlanInfoById(this.$attrs.id).then(res => {
          console.log('计划信息', res)
          this.tableDataList = []
          let position = res.data.position

          position.forEach(item => {
            item.directional = item.position.name //投向版位
            let list = []
            item.direct.forEach(sitem => {
              if (sitem.more && sitem.more.length > 0) {
                sitem.more.forEach(vitem => {
                  let text = ''
                  if (vitem.province && vitem.city && vitem.area) {
                    text = vitem.province + '-' + vitem.city + '-' + vitem.area
                  } else if (vitem.province && vitem.city) {
                    text = vitem.province + '-' + vitem.city
                  } else {
                    text = vitem.province
                  }
                  list.push(text)
                  item.position = list.join(',')//用户定向
                })
              } else {
                let text = ''
                if(!sitem.more){
                  item.position='全国'
                }else {
                  if (sitem.more.province && sitem.more.city && sitem.more.area) {
                    text = sitem.more.province + '-' + sitem.more.city + '-' + sitem.more.area
                  } else if (sitem.more.province && sitem.more.city) {
                    text = sitem.more.province + '-' + sitem.more.city
                  } else {
                    text = sitem.more.province
                  }
                  list.push(text)
                  item.position = list.join(',')//用户定向
                }

              }
            })
            item.startTime = item.plan.start_time//开始时间
            item.endTime = item.plan.end_time//结束时间
            item.totleCoin = item.freeze_score + item.score//预算
            item.pay_type_name = item.plan.pay_type_name//出价方式
            item.custom_coin = item.plan.custom_coin//投放日预算
            item.msg = item.plan.msg//备注
          })
          console.log('position', position)
          this.tableDataList = position
          // //创意
        })
      },
      // getInfo(info) {
      //   let infoList = info;
      //   console.log(infoList, '获取活动信息')
      //   if (info.length > 0) {
      //     this.childList = info//用于子级回显
      //     this.plate_id = info[0].plate_id//平台
      //     this.form.task = JSON.stringify(info)
      //   }
      // },
      getTab(index) {
        this.active = index

      },
      handleUpdate(row) {
        //在点击列表后的编辑
        console.log('row-----', row)
        this.position_id = row.id
        this.form.id = this.$attrs.id
        this.showAdMentChanges = true;

      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleQuery') //关闭弹窗;
      },
      handleChanges(row) {
        let url = ''
        let text = ''
        if (row.status == 1) {
          //调用暂停的接口
          url = reqPositionStausClose
          text = '暂停'
        } else {
          //调用开启的接口
          url = reqPositionStausOpen
          text = '启用'
        }
        this.$modal.confirm(`确认要${text}吗？`).then(() => {
          url(row.id).then(res => {
            this.$modal.msgSuccess(text + '成功');
            this.getPlanInfo();
          })
        })

      }
    }
  }
</script>

<style scoped lang="scss">
  .adType {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    padding: 0px;
    margin: 0px;

    li {
      display: flex;
      line-height: 20px;
      padding: 10px 10px;
      border-bottom: 1px solid #eee;

      > span {
        width: 135px;
        display: flex;
        position: relative;
        margin-right: 10px;
        justify-content: center;

        &:after {
          content: '';
          position: absolute;
          right: 0px;
          top: -5px;
          bottom: -5px;
          background: #eee;
          width: 1px;
        }
      }

      > div {
        flex: 1;
        justify-content: center;
        display: flex;
      }
    }
  }

  .tags {
    display: flex;
    align-items: center;
    padding-left: 0;

    li {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      border: 1px solid #eee;
      color: #444;
      width: 88px;
      cursor: pointer;


      &.active {
        color: #fff;
        border-color: #1670F1;
        background: #1670F1;
      }
    }

  }

  .adContent {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    padding-left: 0px;
    margin: 0;
    margin-top: 10px;

    &.dataList {
      .code {
        width: 180px;

      }
    }

    li {

      height: 40px;
      display: flex;
      line-height: 20px;
      font-size: 14px;
      width: 50%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      align-items: center;

      &:nth-child(2n) {
        border-right: none;
      }

      .code {
        color: #444;
        background: #FAFAFA;
        width: 100px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        box-sizing: border-box;
        font-weight: bold;
      }

      .content {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 20px;
        padding-left: 20px;
        color: #000;
      }
    }

  }

  .logsList {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #eee;
    padding-left: 0px;
    margin: 0;
    margin-top: 10px;

    &.dataList {
      .code {
        width: 180px;

      }
    }

    li {

      height: 40px;
      display: flex;
      line-height: 20px;
      font-size: 14px;
      width: 50%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      align-items: center;

      &:nth-child(2n) {
        border-right: none;
      }

      .code {
        color: #444;
        background: #FAFAFA;
        width: 150px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        box-sizing: border-box;
        font-weight: bold;
      }

      .content {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 20px;
        padding-left: 20px;
        color: #000;
      }
    }

  }

  .dialog-title {
    height: 30px;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .dialog-title {
    & + .el-table {
      margin-bottom: 20px;
    }
  }

  ::v-deep .el-dialog__body {
    max-height: calc(100vh - 250px);
  }

  ::v-deep .el-table .el-table__header-wrapper th, ::v-deep .el-table .el-table__fixed-header-wrapper th {
    color: #000;
  }
</style>
